<!--
 * @Author: your name
 * @Date: 2021-10-07 09:36:59
 * @LastEditTime: 2021-10-07 09:43:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \common-vue\src\components\notice\index.vue
-->
<template>
  <div class="box" v-if="isShow">
    <h3>{{ title }}</h3>
    <p class="box-content">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  mounted() {

  },
  methods: {
    show() {
      this.isShow = true
      setTimeout(this.hide, this.duration)
    },
    hide() {
      this.isShow = false
      this.remove()
    }
  }
}
</script>

<style scoped lang="less">
.box{
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
.box-content{
  width: 200px;
  margin: 10px auto;
  font-size: 14px;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 3px;
  margin-bottom: 8px
}
</style>
